/**
 * #info
 *
 *@author   wuwg
 *@createTime   2018/03/20
 *@updateTime   2018/05/10
 *@description  dropdown  component  下拉菜单组件
 */
/**
 * #item
 *
 * @type        aty-dropdown
 * @cn          下拉菜单
 * @menu        导航
 * @order       30
 * @stPlugin    true
 * @stContainer false
 * @children    [aty-dropdown-menu,aty-dropdown-panel]
 */

import config from '../../../config/config.js'

//  components
import Drop from '../../form/select/dropdown/index.vue'
import atyButton from '../../basic/button/index.vue'
import icon from '../../basic/icon/index.vue'
import atyLink from '../../basic/link/index.vue'
import atyText from '../../basic/text/index.vue'
import dropdownMenu from './dropdown-menu/index.vue'
// directives
import clickoutside from '../../../directives/clickoutside.js'
import TransferDom from '../../../directives/transfer-dom.js'
// prefix
const prefixCls = config.prefix + '-dropdown'
// module
const module = {
  name: prefixCls,
  directives: { clickoutside, TransferDom },
  components: { Drop, dropdownMenu, atyButton, icon, atyLink, atyText },
  props: {
    /**
     * #property
     *
     * @name    trigger
     * @cn      触发方式
     * @type    list
     * @value    click
     * @group    控制
     * @options    [click,hover]
     * @description 下拉菜单出现的触发方式，可选为click，hover
     */
    trigger: {
      validator (value) {
        return Artery.isOneOf(value, ['click', 'hover'])
      },
      default: 'click'
    },
    /**
     * #property
     *
     * @name text
     * @cn   文本
     * @type  string
     * @group  样式
     * @description 下拉菜单的默认文本（触发下拉用的元素）
     */
    text: {
      type: String,
      default: ''
    },
    /**
     * #property
     *
     * @name  type
     * @cn   按钮类型
     * @group 样式
     * @type  list
     * @options [primary, ghost, dashed, text, info, success, warning, error, default]
     * @value  default
     * @description 按钮类型，可选为primary, ghost, dashed, text, info, success, warning, error, default
     */
    type: {
      validator (value) {
        return Artery.isOneOf(value, ['primary', 'ghost', 'dashed', 'text', 'info', 'success', 'warning', 'error', 'default'])
      },
      default: 'default'
    },
    /**
     * #property
     *
     * @name   triggerCategory
     * @cn     触发元素类型
     * @group  样式
     * @type   list
     * @value  button
     * @options [button, link, text ]
     * @description 触发元素类型，可选为 button, link, text
     */
    triggerCategory: {
      validator (value) {
        return Artery.isOneOf(value, ['button', 'link', 'text'])
      },
      default: 'button'
    },
    /**
     * #property
     *
     * @name    hasIcon
     * @cn      是否有图标，
     * @group  样式
     * @type    boolean
     * @bind    must
     * @value    true
     * @description 是否有图标（下拉菜单右边的小箭头）
     */
    hasIcon: {
      type: Boolean,
      default: true
    },

    /**
     * #property
     *
     * @name    placement
     * @cn      下拉菜单出现的位置
     * @group   控制
     * @type    list
     * @options  [top, top-start, top-end ,
     * bottom ,bottom-start, bottom-end,
     * left , left-start , left-end ,
     * right, right-start, right-end]
     * @value    bottom-start
     * @description  下拉菜单出现的位置，可选为 top, top-start, top-end ,
     * bottom ,bottom-start, bottom-end,
     * left , left-start , left-end ,
     * right, right-start, right-end
     */
    placement: {
      validator (value) {
        return Artery.isOneOf(value, [
          'top', 'top-start', 'top-end',
          'bottom', 'bottom-start', 'bottom-end',
          'left', 'left-start', 'left-end',
          'right', 'right-start', 'right-end'])
      },
      default: 'bottom-start'
    },
    /**
     * #property
     *
     * @name    visible
     * @cn      手动控制下拉框的显示，
     * @group   控制
     * @type    boolean
     * @value    false
     * @description 手动控制下拉框的显示，自定义下拉内容时会用到
     */
    visible: {
      type: Boolean,
      default: false
    },
    /**
     * #property
     *
     * @name    transfer
     * @cn      是否将弹层放置于 body 内
     * @group   控制
     * @type    boolean
     * @value    false
     * @description  是否将弹层放置于 body 内，
     *              在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果
     */
    transfer: {
      type: Boolean,
      default: false
    },
    /**
     * #property
     *
     * @name    data
     * @cn      下拉菜单的数据
     * @type    array
     * @bind    must
     * @value   []
     * @description 下拉菜单的数据。数据全部字段为
     *      [
     * {
     * code:1,    // 代码值
     * disabled:true||false,  // 是否禁用
     * selected:true||false,  // 是否选中
     * divided:true||false,  // 是否有分割线
     * name:'中国人'   // !important  此必须字段，其他的为可选字段，用户也可以自己朝对象中增加其他字段
     * }
     * ]
     */
    data: {
      type: Array,
      default () {
        return []
      }
    },
    /**
     * #property
     *
     * @name    dropDownClassName
     * @cn      下拉的样式
     * @type
     * @description 下拉的样式class名称，作用在aty-select-dropdown上
     */
    dropDownClassName: {
      type: String
    }
  },
  data () {
    return {
      prefixCls: prefixCls,
      currentVisible: this.visible,
      scope: {
        className: prefixCls
      }
    }
  },
  watch: {
    visible (val) {
      this.currentVisible = val
    },
    currentVisible (val) {
      if (val) {
        this.$refs.drop.update()
      } else {
        this.$refs.drop.destroy()
      }
      /**
       * #event
       *
       * @name    visible-change
       * @cn      菜单显示状态改变
       * @param   visible   当前值visible的值
       * @body    console.log(visible);
       * @description   在菜单显示状态改变时调用
       */
      this.$emit('visible-change', val)
    },
    data () {
      // 下拉数据变了, 并且是显示的状态,更新一下popper的位置
      if (this.currentVisible) {
        this.$nextTick(()=>this.$refs.drop.update())
      }
    }
  },
  computed: {
    wrapClass () {
      return [prefixCls]
    },
    dropdownCls () {
      return [
        {
          [prefixCls + '-transfer']: this.transfer,
          [`${this.dropDownClassName}`]: this.dropDownClassName
        }]
    }
  },
  methods: {
    // 点击事件
    handleClick () {
      /**
       * #event
       *
       * @name    click
       * @cn      点击菜单项
       * @param   value   当前点击的条目
       * @param   index   当前值对应的index属性
       * @body    console.log("当前点击的条目为："+value+",index:"+index)
       * @description   在点击dropdown-item条目时调用
       */
      if (this.trigger === 'click') {
        this.currentVisible = !this.currentVisible
      }
    },
    // 鼠标移入
    handleMouseenter () {
      if (this.trigger === 'hover') {
        if (this.timer) {
          clearTimeout(this.timer)
        }
        this.timer = setTimeout(() => {
          this.currentVisible = true
        }, 150)
      }
    },
    // 鼠标移出
    handleMouseleave () {
      if (this.trigger == 'hover') {
        if (this.timer) {
          clearTimeout(this.timer)
        }
        this.timer = setTimeout(() => {
          this.currentVisible = false
        }, 150)
      }
    },
    handleMouseenterDrop () {
      // 解决鼠移入弹出层后弹出层消失的问题
      if (this.trigger == 'hover' && this.timer) {
        clearTimeout(this.timer)
      }
    },
    // 点击非菜单区域
    onClickoutside (event) {
      this.handleClose()
      if (this.currentVisible) {
        /**
         * #event
         *
         * @name    clickoutside
         * @cn      点击外部关闭下拉菜单
         * @param   event   当前event对象
         * @body    console.log("触发了clickoutside事件");
         * @description   在点击dropdown之外的区域时调用
         */
        this.$emit('clickoutside', event)
      }
    },
    handleClose () {
      this.currentVisible = false
    }
  },
  updated () {
  },
  created () {
  },
  mounted () {
  }
}
export default module
